<template>
	<view class="text-hide" :class="[mgClass]">
		<!-- , Array.isArray(value) && value.length > 1 ? '' : '' -->
		<view
			class="flex flex-row"
			:class="[isImg && value && value.length ? 'mb-2-2' : '']"
		>
			<view :style="{ width: innerLabelWidth + 'px' }">
				<text class="color-secondary" :class="[textSize, labelClass]">{{ label }}</text>
			</view>
			<view class="flex-1" v-if="phones && phones.length > 0">
				<view v-for="(el, i) in phones" :key="el" class="row-center" :class="[i === phones.length - 1 ? '' : 'mb-2-2']">
					<view @click="callPhone(el)" class="break-all block flex-1">
						<text :class="[textSize, valueColorClass, valueClass]" :user-select="true">
							{{ handleTempalteValue(value[i]) }}{{el ? '(' : ''}}<text v-if="el" class="color-active">{{el}}</text>{{el ? ')' : ''}}
						</text>
					</view>
					<view v-if="el" @click="callPhone(el)"> <sl-icon name="t-icon-phone" :size="40" /> </view>
				</view>
			</view>
			<view
				class="flex-1 value-view"
				v-else-if="!isImg"
				@click="handleClickContent"
			>
				<text
					:class="[textSize, valueColorClass, ellipsis ? 'text-ellipsis-1 nowrap inline-block' : 'break-all', valueClass]"
					:style="{width: ellipsis ? (valueWidth + 'px') : 'auto'}"
					:user-select="ellipsis ? false : true"
				>
					{{ isNullOrUndefOrEmpty(value) || value.length === 0 ? '--' : value }}
				</text>
			</view>
			<view v-if="icon" @click="handleClickContent"> <sl-icon :name="icon" :size="40" /> </view>
		</view>
		<c-img-list :data="value" v-if="isImg" :imgMode='imgMode'/>
	</view>
</template>

<script>
import { ref, getCurrentInstance, onMounted } from 'vue';
import { isNullOrUndefOrEmpty, handleTempalteValue } from "@/uni-sdk/utils/common.js";
export default {
	props: {
		icon: String,
		label: String,
		value: [String, Number, Array],
		phones: Array,
		isPhone: Boolean,
		valueColorClass: {
			default: 'color-main',
			type: String,
		},
		mgClass: {
			default: 'mb-2-2',
			type: String,
		},
		textSize: {
			default: 'text-m',
			type: String,
		},
		labelWidth: {
			default: 200,
			type: Number,
		},
		isImg: Boolean,
		ellipsis: Boolean,
		labelClass: {
			default: '',
			type: String,
		},
		valueClass: {
			default: '',
			type: String,
		},
		imgMode: String,
	},
	setup(props, ctx) {
		const innerLabelWidth = ref(uni.upx2px(props.labelWidth));
		const valueWidth = ref(150);
		const { ctx: curCtx } = getCurrentInstance();
		function callPhone(phone) {
			if (phone) {
				phone = phone.replace(/[^\d]+/g, '');
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone,
						fail(){}
					});
				}
			}
		}
		function handleClickContent() {
			if (props.isPhone) {
				callPhone(props.value);
			}
			ctx.emit('touch');
		}
		onMounted(() => {
			if(props.ellipsis){
				uni
					.createSelectorQuery()
					.in(curCtx)
					.select('.value-view')
					.boundingClientRect((data) => {
						if(data){
							valueWidth.value = data.width;
						}
					})
					.exec();
			}
		});
		return {
			innerLabelWidth,
			callPhone,
			handleClickContent,
			valueWidth,
			isNullOrUndefOrEmpty,
			handleTempalteValue,
		};
	},
};
</script>
